<template>
    <view class="box">
        <!-- #ifndef H5 -->
        <uni-nav-bar dark fixed backgroundStyle="#ffffff" color="#121317" status-bar>
            <template slot="left">
                <uni-icons type="arrow-left" @click="newReturnPagesApplication()" color="#121317" size="24"></uni-icons>
            </template>
            <template>
                <view class="nav_title">{{ navTitle }}</view>
            </template>
            <!-- #ifndef MP -->
            <template slot="right">
                <view class="title-right" @click.stop="_shareOpen">
                    <text class="iconfont icon-a-Frame1076" style="color: #007aff; font-size: 32rpx"></text>
                    <text class="text">分享</text>
                </view>
            </template>
            <!-- #endif -->
        </uni-nav-bar>
        <!-- #endif -->

        <!-- 搜索 -->
        <view class="searchBox" id="searchBox">
            <view class="app_nav_title nav_input" @click.stop="goSearch()">
                <view class="iconfont icon-a-Frame1073"></view>
                <view class="input-placeholder" style="font-size: 26rpx;color: #858688;">{{ getSearchPlaceHolder() }}
                </view>
            </view>
        </view>
        <view class="content_box" :style="{ height: `calc( 100vh - ${searchBoxHeight}px )` }">
            <template v-if="list1 && list1.length">
                <view class="leftBox">
                    <view class="item" @click.stop="checkLeft(item)" :class="{ active: active == item }"
                        v-for="(item, index) in list1" :key="index">
                        {{ item }}
                    </view>
                </view>
                <view class="rightBox">
                    <template v-if="list2 && list2.length">
                        <view class="item" @click.stop="jumpDataDetail(item)" v-for="(item, index) in list2" :key="index">
                            {{ showLabel(item) }}
                        </view>
                    </template>
                    <defaultModule style="height: 80%" v-else :defaultInfo="defaultInfo"></defaultModule>
                </view>
            </template>
            <defaultModule style="height: 80%" v-else :defaultInfo="defaultInfo"></defaultModule>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            defaultInfo: {
                show: false, // 显示缺省页内容
                url: '', // 图片
                text: '暂无可查询数据~', // 文字
                showBtn: false // 是否显示重新加载按钮
            },
            navTitle: '', // 根据查询内容显示导航栏名称
            searchDataInfo: {},
            info: {
                '可报考专业': {
                    listApi: 'getTreeCollegeList',
                    api: 'getCollegeList',
                    placeholder: '请输入专科专业查询',
                    search_data: 'major_name',
                    searchPageTitle: '搜索专科专业查询',
                },
                '招生院校及人数': {
                    listApi: 'getTreeUniversitySchoolList',
                    api: 'getLicationUniversitySchoolList',
                    placeholder: '请输入本科院校名称查询',
                    search_data: 'university_school_name',
                    searchPageTitle: '搜索招生院校查询',
                },
                '招生专业及人数': {
                    checkType: 'province_type',
                    listApi: 'getUniversityMajorTreeList',
                    api: 'getLicationUniversityMajorList',
                    placeholder: '请输入升本专业查询',
                    search_data: 'major_name',
                    searchPageTitle: '搜索升本专业查询',
                },
                '考试分数线': {
                    checkType: 'province_type',
                    listApi: 'getUniversityMajorTreeList',
                    api: 'getLicationUniversityMajorList',
                    placeholder: '请输入升本专业查询',
                    search_data: 'major_name',
                    searchPageTitle: '搜索升本专业查询',
                },
                '院校最低录取分': {
                    checkType: 'province_type',
                    listApi: 'getUniversityMajorTreeList',
                    api: 'getLicationUniversityMajorList',
                    placeholder: '请输入升本专业查询',
                    search_data: 'major_name',
                    searchPageTitle: '搜索升本专业查询',
                },
                '成绩分布及预测': {
                    checkType: 'province_type',
                    listApi: 'getUniversityMajorTreeList',
                    api: 'getLicationUniversityMajorList',
                    placeholder: '请输入升本专业查询',
                    search_data: 'major_name',
                    searchPageTitle: '搜索升本专业查询',
                },
                '专业报考热度': {
                    checkType: 'province_type',
                    listApi: 'getUniversityMajorTreeList',
                    api: 'getLicationUniversityMajorList',
                    placeholder: '请输入升本专业查询',
                    search_data: 'major_name',
                    searchPageTitle: '搜索升本专业查询',
                },
            },
            allInfo: {},
            list1: [],
            list2: [],
            active: '',

            searchBoxHeight: 0
        }
    },
    methods: {
        getSearchBoxHeight(){
            let that = this;
            setTimeout(()=>{
                uni.createSelectorQuery().in(that).select('#searchBox').boundingClientRect().exec((data) => {
                    if(data && data.length){
                        that.searchBoxHeight = data[0].height + data[0].top;
                    }
                });
            },500)
        },
        jumpDataDetail(checkInfo) {
            let that = this;
            let jump_data = that.searchDataInfo.jump_data;
            if (!jump_data.url) return;
            let obj = Object.assign({}, that.searchDataInfo, { checkInfo: checkInfo })
            uni.setStorageSync('searchDataInfo', obj);
            that.applicationRewritingNavigateTo({
                delta: 1,
                url: jump_data.url
            });
        },
        checkLeft(val) {
            let that = this;
            that.active = val || '';
            that.list2 = that.allInfo[val];
        },
        showLabel(obj) {
            let that = this;
            let searchPageInfo = that.searchDataInfo.searchPageInfo;
            return obj[searchPageInfo.search_data];
        },
        async getList() {
            let that = this;
            let searchPageInfo = that.searchDataInfo.searchPageInfo || {};
            if (!searchPageInfo || !searchPageInfo.listApi) return;
            let { code, data } = await that.$application_api[searchPageInfo.listApi]({});
            if(code!=0) return;
            that.allInfo = data;
            that.list1 = [];
            that.list2 = [];

            for (const key in that.allInfo) {
                that.list1.push(key)
            }
            if (that.list1 && that.list1.length) {
                that.checkLeft(that.list1[0])
            }
        },
        getSearchPlaceHolder() {
            let that = this;
            let placeholder = '';
            if (that.searchDataInfo && that.searchDataInfo.searchPageInfo) {
                placeholder = that.searchDataInfo.searchPageInfo.placeholder
            }
            return placeholder;
        },
        goSearch() {
            let that = this;
            let searchPageInfo = that.searchDataInfo.searchPageInfo || {};
            if (!searchPageInfo || !searchPageInfo.api){
                uni.showToast({
                    icon:'none',
                    title: '暂无可查询数据'
                });
                return;
            }
            uni.setStorageSync('searchDataInfo', that.searchDataInfo);
            that.applicationRewritingNavigateTo({
                url: '/pages/applicationPage/searchPages'
            });
        }
    },
    onLoad() {
        let that = this;
        that.searchDataInfo = uni.getStorageSync('searchDataInfo');
        if (that.searchDataInfo && that.searchDataInfo.title) {
            if (that.searchDataInfo.title.includes('查')) {
                that.navTitle = that.searchDataInfo.title.split('查')[1];
            } else {
                that.navTitle = that.searchDataInfo.title;
            }
        }
        // #ifdef H5
        uni.setNavigationBarTitle({
            title: that.navTitle,
            success: function () { },
            fail: function (err) { }
        });
        // #endif

        that.searchDataInfo = Object.assign({}, that.searchDataInfo, {
            searchPageInfo: that.info[that.navTitle] || {}
        })

        that.getList();
        that.getSearchBoxHeight();
    }
};
</script>

<style lang="scss" scoped>
.searchBox {
    width: 100vw;
    height: calc(84rpx + 28rpx);
    padding: 0 38rpx;
    box-sizing: border-box;
}

.content_box {
    width: 100vw;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding-top: 40rpx;
    box-sizing: border-box;

    .leftBox {
        width: calc(100vw * (215 / 750));
        height: 100%;
        overflow-y: auto;
        background-color: $uni-bg-color-grey;

        .item {
            padding: 23rpx 20rpx;
            box-sizing: border-box;
            width: 100%;
            text-align: center;
            font-weight: 400;
            font-size: $font-size-D;
            color: $font-color-light;

            &.active {
                background-color: $uni-bg-color;
                position: relative;
                color: $font-color-main-A;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    z-index: 1;
                    width: 6rpx;
                    height: 30rpx;
                    background: $main-bg-light;
                    border-radius: 0rpx 6rpx 6rpx 0rpx;
                    transform: translate(0, -50%);
                }
            }
        }
    }

    .rightBox {
        width: calc(100vw - 100vw * (215 / 750));
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
        padding: 10rpx 30rpx;
        box-sizing: border-box;

        .item {
            font-weight: 700;
            font-size: $font-size-C;
            color: $font-color-main-A;
            padding: 30rpx 0;
            box-sizing: border-box;
            border-bottom: 2rpx solid #F9FAFC;
        }
    }
}
</style>
